<template>
  <div class="sceniclist box bg">
    <div class="backbox">
      <img
        src="@/assets/img/back.png"
        class="goback"
        @click="$router.replace({ path: '/index', query: { intxt: 'back' } })"
      />
    </div>
    <div class="sceniccontainer">
      <div class="scenicinfobox">
        <hr class="hr hr1" />
        <hr class="hr hr2" />

        <div class="sceniccont" v-if="scenicList.length > 0">
          <div
            class="ditem clmstart"
            v-for="item in scenicList"
            :key="item.id"
            @click="
              $router.replace({ name: 'scenicinfo', params: { id: item.id } })
            "
          >
            <div class="imgbox">
              <img v-lazy="item.poster_url" />
            </div>
            <div class="scenicnamebox">{{ item.name }}</div>
          </div>
        </div>
        <p class="notips" v-show="!endflag" @click="loadMore">加载更多</p>
        <p class="notips" v-show="endflag">没有更多了</p>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      scenicList: [
        {
          id: "1",
          city: "",
          name: "赛里木湖",
          poster_url:
            "http://dove-2021.oss-cn-shanghai.aliyuncs.com/20230425185342957585.png?x-oss-process=image/resize,h_327,m_lfit",
        },
      ],
      alllist: [], //所有门店
      pindex: 1, //页码
      endflag: false, //数据加载完毕
      total: 0, //总数据量
    };
  },
  created() {
    this.alllist = this.$store.state.scenicAllList;
    this.scenicList = this.alllist;
    if (this.alllist.length <= 0) {
      this.getAllscenicList();
    }
  },
  methods: {
    //加载更多
    loadMore() {
      this.pindex++;
      this.getAllscenicList();
      this.baoyangshow = false;
      this.zhusushow = false;
      this.canyinshow = false;
      this.tag = [];
    },
    //获取门店列表
    getAllscenicList() {
      Toast.loading({
        message: "loading...",
        forbidClick: true,
        duration: 0, //值为 0 时，toast 不会消失
        overlay: true, //是否显示背景遮罩层
      });
      this.$http
        .post("/getAllScenicsInfo", { page: this.pindex })
        .then((res) => {
          Toast.clear();
          // console.log(res);
          if (res.data.code == 200) {
            this.alllist = this.alllist.concat(res.data.data.lists);
            this.total = res.data.data.total;
            if (this.alllist.length >= this.total) {
              this.endflag = true;
            }
            this.scenicList = this.alllist;
            this.$store.commit("updateScenicList", this.alllist);
          } else {
            Toast(res.data.msg);
          }
        });
    },
  },
};
</script>
<style lang="less" scoped>
.sceniclist {
  overflow-y: scroll;
  .backbox {
    top: 3rem;
  }
  .sceniccontainer {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 11rem;
    .hr {
      width: 91.7%;
      height: 5px;
      background: #db101a;
      border: 0;
      border-style: none;
      margin-top: 0.5rem;
    }
    .hr2 {
      height: 3px;
      margin-top: 0;
    }
    .scenicinfobox {
      position: relative;
      margin: 0 auto;
      .sceniccont {
        position: relative;
        height: auto;
        margin: 2rem 1.5rem 0 1.8rem;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: flex-start;
        .ditem {
          position: relative;
          width: 337px;
          height: 363px;
          background: url("@/assets/img/scenicbox.png") no-repeat;
          background-size: 100% 100%;
          margin-bottom: 1.5rem;
          .imgbox {
            width: 300px;
            height: 245px;
            margin-top: 1.3rem;
            border-radius: 0.5rem;
            overflow: hidden;
            background-color: #ffffff;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          .scenicnamebox {
            position: relative;
            width: 255px;
            height: 40px;
            margin-top: 2.4rem;
            margin-left: 2.5rem;
            overflow: hidden;
            text-align: center;
            font-size: 1.7rem;
            line-height: 40px;
            font-weight: normal;
            color: #404040;
          }
        }
      }
      .notips {
        font-size: 1.3rem;
        color: #5e5e5e;
        text-align: center;
        padding-bottom: 6rem;
      }
    }
  }
}
</style>
